<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>县城小超市ERP系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* 基础样式 - 确保在老设备上流畅运行 */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }

        :root {
            --primary: #2563eb;
            --secondary: #3b82f6;
            --success: #10b981;
            --warning: #f59e0b;
            --danger: #ef4444;
            --light: #f8fafc;
            --dark: #1e293b;
            --gray: #64748b;
            --border: #e2e8f0;
        }

        body {
            background-color: #f1f5f9;
            color: var(--dark);
            min-height: 100vh;
            overflow-x: hidden;
            touch-action: manipulation;
            -webkit-tap-highlight-color: transparent;
        }

        /* 强制横屏样式 */
        @media screen and (orientation: portrait) {
            .orientation-warning {
                display: flex;
            }
        }

        .orientation-warning {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.9);
            color: white;
            z-index: 1000;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 20px;
        }

        .orientation-warning i {
            font-size: 4rem;
            margin-bottom: 20px;
            color: var(--warning);
        }

        /* 页面容器 */
        .container {
            display: flex;
            min-height: 100vh;
            max-width: 100%;
            margin: 0 auto;
            background-color: white;
        }

        /* 侧边导航 */
        .sidebar {
            width: 70px;
            background: var(--dark);
            color: white;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px 0;
        }

        .logo {
            width: 40px;
            height: 40px;
            background: var(--primary);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 30px;
        }

        .nav-item {
            width: 100%;
            padding: 15px 0;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
            position: relative;
        }

        .nav-item.active {
            background: rgba(255,255,255,0.1);
        }

        .nav-item i {
            font-size: 1.4rem;
        }

        .nav-item .label {
            font-size: 0.7rem;
            margin-top: 5px;
        }

        .nav-item:hover {
            background: rgba(255,255,255,0.15);
        }

        /* 主内容区域 */
        .main-content {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
        }

        .page {
            display: none;
        }

        .page.active {
            display: block;
        }

        .page-header {
            margin-bottom: 25px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .page-title {
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--dark);
        }

        .page-subtitle {
            color: var(--gray);
            margin-top: 5px;
        }

        /* 卡片样式 */
        .card {
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
            padding: 20px;
            margin-bottom: 20px;
            border: 1px solid var(--border);
        }

        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--border);
        }

        .card-title {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--dark);
        }

        /* 按钮样式 */
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 10px 16px;
            border-radius: 8px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
            border: none;
            outline: none;
            font-size: 1rem;
            height: 44px;
        }

        .btn i {
            margin-right: 8px;
        }

        .btn-primary {
            background: var(--primary);
            color: white;
        }

        .btn-primary:hover {
            background: var(--secondary);
        }

        .btn-lg {
            padding: 14px 24px;
            font-size: 1.1rem;
            height: 54px;
        }

        /* 表单元素 */
        .form-group {
            margin-bottom: 20px;
        }

        .form-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: var(--dark);
        }

        .form-control {
            width: 100%;
            padding: 12px 14px;
            border: 1px solid var(--border);
            border-radius: 8px;
            font-size: 1rem;
            transition: border-color 0.2s;
        }

        .form-control:focus {
            border-color: var(--primary);
            outline: none;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
        }

        /* 快速扫码区域 */
        .scanner-area {
            background: var(--light);
            border: 2px dashed var(--gray);
            border-radius: 12px;
            height: 200px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .scanner-area:hover {
            border-color: var(--primary);
            background: rgba(59, 130, 246, 0.05);
        }

        .scanner-area i {
            font-size: 4rem;
            color: var(--gray);
            margin-bottom: 15px;
        }

        .scanner-text {
            font-size: 1.2rem;
            color: var(--gray);
        }

        /* 表格样式 */
        .table {
            width: 100%;
            border-collapse: collapse;
        }

        .table th,
        .table td {
            padding: 14px 16px;
            text-align: left;
            border-bottom: 1px solid var(--border);
        }

        .table th {
            background: var(--light);
            font-weight: 600;
            color: var(--dark);
        }

        .table tr:hover {
            background: rgba(59, 130, 246, 0.03);
        }

        /* 利润显示 */
        .profit {
            font-weight: 600;
        }

        .profit.positive {
            color: var(--success);
        }

        .profit.negative {
            color: var(--danger);
        }

        /* 库存统计 */
        .stats-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 25px;
        }

        .stat-card {
            background: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
            border-left: 4px solid var(--primary);
        }

        .stat-card.warning {
            border-left-color: var(--warning);
        }

        .stat-card.success {
            border-left-color: var(--success);
        }

        .stat-title {
            font-size: 0.9rem;
            color: var(--gray);
            margin-bottom: 10px;
        }

        .stat-value {
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--dark);
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            .container {
                flex-direction: column;
            }

            .sidebar {
                width: 100%;
                height: auto;
                flex-direction: row;
                padding: 0;
                overflow-x: auto;
            }

            .logo {
                margin: 10px;
            }

            .nav-item {
                padding: 15px 10px;
                min-width: 70px;
            }

            .main-content {
                padding: 15px;
            }
        }
    </style>
</head>
<body>
<!-- 竖屏提示 -->
<div class="orientation-warning">
    <i class="fas fa-sync-alt fa-spin"></i>
    <h2>请将手机旋转为横屏模式</h2>
    <p>为获得最佳操作体验，请在柜台使用横屏模式</p>
</div>

<div class="container">
    <!-- 侧边导航 -->
    <div class="sidebar">
        <div class="logo">
            <i class="fas fa-store"></i>
        </div>
        <div class="nav-item active" data-target="dashboard">
            <i class="fas fa-home"></i>
            <div class="label">首页</div>
        </div>
        <div class="nav-item" data-target="input">
            <i class="fas fa-barcode"></i>
            <div class="label">入库</div>
        </div>
        <div class="nav-item" data-target="sales">
            <i class="fas fa-cash-register"></i>
            <div class="label">销售</div>
        </div>
        <div class="nav-item" data-target="inventory">
            <i class="fas fa-boxes"></i>
            <div class="label">库存</div>
        </div>
        <div class="nav-item" data-target="reports">
            <i class="fas fa-chart-bar"></i>
            <div class="label">报表</div>
        </div>
        <div class="nav-item" data-target="settings">
            <i class="fas fa-cog"></i>
            <div class="label">设置</div>
        </div>
    </div>

    <!-- 主内容区域 -->
    <div class="main-content">
        <!-- 仪表盘页面 -->
        <div class="page active" id="dashboard">
            <div class="page-header">
                <div>
                    <h1 class="page-title">超市经营概览</h1>
                    <p class="page-subtitle">今日经营数据实时更新</p>
                </div>
                <div class="date-display">
                    2023年7月15日 周六
                </div>
            </div>

            <!-- 统计卡片 -->
            <div class="stats-container">
                <div class="stat-card">
                    <div class="stat-title">今日销售额</div>
                    <div class="stat-value">¥2,845</div>
                </div>
                <div class="stat-card success">
                    <div class="stat-title">今日利润</div>
                    <div class="stat-value">¥683</div>
                </div>
                <div class="stat-card">
                    <div class="stat-title">今日交易数</div>
                    <div class="stat-value">47</div>
                </div>
                <div class="stat-card warning">
                    <div class="stat-title">需补货商品</div>
                    <div class="stat-value">8</div>
                </div>
            </div>

            <!-- 快速操作 -->
            <div class="card">
                <div class="card-header">
                    <h2 class="card-title">快速操作</h2>
                </div>
                <div class="grid-buttons" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 15px;">
                    <button class="btn btn-primary" onclick="navigateTo('input')">
                        <i class="fas fa-barcode"></i> 商品入库
                    </button>
                    <button class="btn btn-primary" onclick="navigateTo('sales')">
                        <i class="fas fa-shopping-cart"></i> 销售收银
                    </button>
                    <button class="btn btn-primary" onclick="navigateTo('inventory')">
                        <i class="fas fa-clipboard-list"></i> 库存盘点
                    </button>
                    <button class="btn btn-primary" onclick="navigateTo('reports')">
                        <i class="fas fa-file-invoice-dollar"></i> 利润报表
                    </button>
                </div>
            </div>

            <!-- 库存预警 -->
            <div class="card">
                <div class="card-header">
                    <h2 class="card-title">库存预警</h2>
                    <button class="btn">查看全部</button>
                </div>
                <table class="table">
                    <thead>
                    <tr>
                        <th>商品名称</th>
                        <th>当前库存</th>
                        <th>预警值</th>
                        <th>状态</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>康师傅红烧牛肉面</td>
                        <td>12</td>
                        <td>20</td>
                        <td><span class="badge warning">需补货</span></td>
                    </tr>
                    <tr>
                        <td>农夫山泉矿泉水</td>
                        <td>18</td>
                        <td>30</td>
                        <td><span class="badge warning">需补货</span></td>
                    </tr>
                    <tr>
                        <td>清风纸巾</td>
                        <td>8</td>
                        <td>15</td>
                        <td><span class="badge danger">紧急补货</span></td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- 商品入库页面 -->
        <div class="page" id="input">
            <div class="page-header">
                <div>
                    <h1 class="page-title">商品入库</h1>
                    <p class="page-subtitle">扫码或手动录入商品信息</p>
                </div>
                <button class="btn" onclick="navigateTo('dashboard')">
                    <i class="fas fa-arrow-left"></i> 返回
                </button>
            </div>

            <div class="card">
                <div class="scanner-area" onclick="simulateScan()">
                    <i class="fas fa-barcode"></i>
                    <div class="scanner-text">点击扫码或使用扫码枪</div>
                </div>

                <div class="form-group">
                    <label class="form-label">商品条码</label>
                    <input type="text" class="form-control" id="barcodeInput" placeholder="输入商品条码或扫码">
                </div>

                <div class="form-group">
                    <label class="form-label">商品名称</label>
                    <input type="text" class="form-control" placeholder="自动识别或手动输入">
                </div>

                <div class="form-row" style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px;">
                    <div class="form-group">
                        <label class="form-label">进货价 (¥)</label>
                        <input type="number" class="form-control" placeholder="0.00">
                    </div>
                    <div class="form-group">
                        <label class="form-label">销售价 (¥)</label>
                        <input type="number" class="form-control" placeholder="0.00">
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-label">入库数量</label>
                    <input type="number" class="form-control" value="1">
                </div>

                <button class="btn btn-primary btn-lg" style="width: 100%;">
                    <i class="fas fa-save"></i> 确认入库
                </button>
            </div>

            <div class="card">
                <div class="card-header">
                    <h2 class="card-title">最近入库记录</h2>
                </div>
                <table class="table">
                    <thead>
                    <tr>
                        <th>商品</th>
                        <th>时间</th>
                        <th>数量</th>
                        <th>操作员</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>可口可乐 330ml</td>
                        <td>10:25</td>
                        <td>24</td>
                        <td>张老板</td>
                    </tr>
                    <tr>
                        <td>奥利奥饼干</td>
                        <td>09:48</td>
                        <td>12</td>
                        <td>张老板</td>
                    </tr>
                    <tr>
                        <td>金龙鱼食用油</td>
                        <td>昨天</td>
                        <td>6</td>
                        <td>李店员</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- 销售收银页面 -->
        <div class="page" id="sales">
            <div class="page-header">
                <div>
                    <h1 class="page-title">销售收银</h1>
                    <p class="page-subtitle">扫码商品进行收银结算</p>
                </div>
                <button class="btn" onclick="navigateTo('dashboard')">
                    <i class="fas fa-arrow-left"></i> 返回
                </button>
            </div>

            <div class="card">
                <div class="scanner-area" onclick="simulateSaleScan()">
                    <i class="fas fa-barcode"></i>
                    <div class="scanner-text">点击扫码或使用扫码枪</div>
                </div>

                <div class="cart-items">
                    <table class="table">
                        <thead>
                        <tr>
                            <th>商品</th>
                            <th>单价</th>
                            <th>数量</th>
                            <th>小计</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>康师傅红烧牛肉面</td>
                            <td>¥4.50</td>
                            <td>2</td>
                            <td>¥9.00</td>
                        </tr>
                        <tr>
                            <td>农夫山泉矿泉水</td>
                            <td>¥2.00</td>
                            <td>3</td>
                            <td>¥6.00</td>
                        </tr>
                        <tr>
                            <td>双汇火腿肠</td>
                            <td>¥1.50</td>
                            <td>5</td>
                            <td>¥7.50</td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <div class="summary-card">
                    <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
                        <span>商品数量:</span>
                        <span>3</span>
                    </div>
                    <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
                        <span>商品总价:</span>
                        <span>¥22.50</span>
                    </div>
                    <div style="display: flex; justify-content: space-between; margin-bottom: 10px; font-weight: bold;">
                        <span>预计利润:</span>
                        <span class="profit positive">¥5.40</span>
                    </div>
                </div>

                <div class="payment-actions" style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 20px;">
                    <button class="btn btn-primary">
                        <i class="fas fa-money-bill-wave"></i> 现金支付
                    </button>
                    <button class="btn btn-primary">
                        <i class="fas fa-qrcode"></i> 扫码支付
                    </button>
                </div>
            </div>
        </div>

        <!-- 库存管理页面 -->
        <div class="page" id="inventory">
            <div class="page-header">
                <div>
                    <h1 class="page-title">库存管理</h1>
                    <p class="page-subtitle">当前库存商品情况</p>
                </div>
                <button class="btn" onclick="navigateTo('dashboard')">
                    <i class="fas fa-arrow-left"></i> 返回
                </button>
            </div>

            <div class="card">
                <div class="card-header">
                    <h2 class="card-title">库存概览</h2>
                    <button class="btn btn-primary">
                        <i class="fas fa-plus"></i> 新增商品
                    </button>
                </div>

                <div class="search-bar" style="margin-bottom: 20px;">
                    <input type="text" class="form-control" placeholder="搜索商品名称或条码">
                </div>

                <table class="table">
                    <thead>
                    <tr>
                        <th>商品名称</th>
                        <th>条码</th>
                        <th>库存</th>
                        <th>进价</th>
                        <th>售价</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>康师傅红烧牛肉面</td>
                        <td>6920152411028</td>
                        <td>12</td>
                        <td>¥3.20</td>
                        <td>¥4.50</td>
                        <td>
                            <button class="btn" style="padding: 5px 10px;">
                                <i class="fas fa-edit"></i>
                            </button>
                        </td>
                    </tr>
                    <tr>
                        <td>农夫山泉矿泉水</td>
                        <td>6921168590018</td>
                        <td>18</td>
                        <td>¥0.80</td>
                        <td>¥2.00</td>
                        <td>
                            <button class="btn" style="padding: 5px 10px;">
                                <i class="fas fa-edit"></i>
                            </button>
                        </td>
                    </tr>
                    <tr>
                        <td>双汇火腿肠</td>
                        <td>6902890234099</td>
                        <td>36</td>
                        <td>¥0.90</td>
                        <td>¥1.50</td>
                        <td>
                            <button class="btn" style="padding: 5px 10px;">
                                <i class="fas fa-edit"></i>
                            </button>
                        </td>
                    </tr>
                    <tr>
                        <td>清风纸巾</td>
                        <td>6926410328120</td>
                        <td>8</td>
                        <td>¥8.50</td>
                        <td>¥12.00</td>
                        <td>
                            <button class="btn" style="padding: 5px 10px;">
                                <i class="fas fa-edit"></i>
                            </button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script>
    // 页面导航功能
    function navigateTo(pageId) {
        // 隐藏所有页面
        document.querySelectorAll('.page').forEach(page => {
            page.classList.remove('active');
        });

        // 显示目标页面
        document.getElementById(pageId).classList.add('active');

        // 更新导航激活状态
        document.querySelectorAll('.nav-item').forEach(item => {
            item.classList.remove('active');
        });

        // 找到对应的导航项并激活
        document.querySelector(`.nav-item[data-target="${pageId}"]`).classList.add('active');
    }

    // 导航项点击事件
    document.querySelectorAll('.nav-item').forEach(item => {
        item.addEventListener('click', function() {
            const targetPage = this.getAttribute('data-target');
            navigateTo(targetPage);
        });
    });

    // 模拟扫码功能
    function simulateScan() {
        const barcodeInput = document.getElementById('barcodeInput');
        const sampleBarcodes = [
            '6920152411028', // 康师傅
            '6926410328120', // 清风纸巾
            '6902890234099', // 双汇火腿肠
            '6921168590018'  // 农夫山泉
        ];

        const randomBarcode = sampleBarcodes[Math.floor(Math.random() * sampleBarcodes.length)];

        // 显示扫描动画效果
        const scannerArea = document.querySelector('.scanner-area');
        const originalIcon = scannerArea.querySelector('i');
        const originalText = scannerArea.querySelector('.scanner-text');

        originalIcon.style.display = 'none';
        originalText.style.display = 'none';

        const scanningIcon = document.createElement('i');
        scanningIcon.className = 'fas fa-barcode fa-flip';
        scanningIcon.style.fontSize = '4rem';
        scanningIcon.style.color = '#2563eb';
        scannerArea.appendChild(scanningIcon);

        const scanningText = document.createElement('div');
        scanningText.className = 'scanner-text';
        scanningText.textContent = '扫描中...';
        scanningText.style.color = '#2563eb';
        scannerArea.appendChild(scanningText);

        // 模拟扫描过程
        setTimeout(() => {
            scannerArea.removeChild(scanningIcon);
            scannerArea.removeChild(scanningText);

            originalIcon.style.display = 'block';
            originalText.style.display = 'block';

            barcodeInput.value = randomBarcode;
            barcodeInput.focus();

            // 显示成功提示
            const successText = document.createElement('div');
            successText.className = 'scanner-text';
            successText.innerHTML = '<i class="fas fa-check-circle" style="color: #10b981;"></i> 扫描成功！';
            successText.style.color = '#10b981';
            scannerArea.appendChild(successText);

            setTimeout(() => {
                scannerArea.removeChild(successText);
            }, 2000);
        }, 1500);
    }

    // 模拟销售扫码
    function simulateSaleScan() {
        const scannerArea = document.querySelectorAll('.scanner-area')[1];
        const originalIcon = scannerArea.querySelector('i');
        const originalText = scannerArea.querySelector('.scanner-text');

        originalIcon.style.display = 'none';
        originalText.style.display = 'none';

        const scanningIcon = document.createElement('i');
        scanningIcon.className = 'fas fa-barcode fa-flip';
        scanningIcon.style.fontSize = '4rem';
        scanningIcon.style.color = '#2563eb';
        scannerArea.appendChild(scanningIcon);

        const scanningText = document.createElement('div');
        scanningText.className = 'scanner-text';
        scanningText.textContent = '扫描中...';
        scanningText.style.color = '#2563eb';
        scannerArea.appendChild(scanningText);

        setTimeout(() => {
            scannerArea.removeChild(scanningIcon);
            scannerArea.removeChild(scanningText);

            originalIcon.style.display = 'block';
            originalText.style.display = 'block';

            const successText = document.createElement('div');
            successText.className = 'scanner-text';
            successText.innerHTML = '<i class="fas fa-check-circle" style="color: #10b981;"></i> 商品已添加！';
            successText.style.color = '#10b981';
            scannerArea.appendChild(successText);

            setTimeout(() => {
                scannerArea.removeChild(successText);
            }, 1500);
        }, 1000);
    }

    // 初始化页面
    document.addEventListener('DOMContentLoaded', function() {
        // 设置首页为活动状态
        navigateTo('dashboard');
    });
</script>
</body>
</html>